<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="权限">
        <el-form ref="formRef" :model="form" size="small" label-width="60" :show-message="false">
          <el-row :gutter="8">
            <el-col :span="6">
              <el-form-item label="权限名称" prop="authName">
                <el-input placeholder="请输入" v-model="form.authName"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="el-col-auto">
              <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="mt-sm mb-sm">
          <el-button size="small" @click="addDialogVisible = true">新增</el-button>

          <el-dialog class="dialog-title-small" v-model="addDialogVisible" title="新增权限" width="500">
            <el-form ref="formRef2" :model="form" size="small" label-width="60" :show-message="false">
              <el-row :gutter="8">
                <el-col>
                  <el-form-item label="权限名称" prop="authName">
                    <el-input placeholder="请输入" v-model="form2.authName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="所属分类" prop="pAuthId">
                    <el-select v-model="form2.moduleId" placeholder="请选择" style="width: 240px">
                      <el-option v-for="item in moduleList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <template #footer>
              <div class="dialog-footer">
                <el-button size="small" @click="addDialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="add">确定</el-button>
              </div>
            </template>
          </el-dialog>
        </div>
        <vxe-grid ref="gridRef" v-bind="gridOptions">
          <template #control="{ row }">
            <el-popconfirm title="确定要删除吗?" :hide-after="0" @confirm="del(row)">
              <template #reference>
                <el-button link type="danger">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </vxe-grid>
      </el-tab-pane>
      <el-tab-pane label="模块"> </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { http } from '@/plugins/axios'
import type { VxeGridInstance, VxeGridProps } from 'vxe-table'
import { GRID_BASE_CONFIG } from '@/plugins/vxe-table'
import { ElDialog } from 'element-plus'
import { notification, objectToFormData } from '@/services/common'

const form = reactive({
  authName: ''
})

const form2 = reactive({
  authName: '',
  moduleId: ''
})

const addDialogVisible = ref(false)
const moduleList: any = reactive([])

const gridRef = ref<VxeGridInstance<any>>()

const gridOptions = reactive<VxeGridProps<any>>({
  ...GRID_BASE_CONFIG,
  pagerConfig: {
    currentPage: 1,
    pageSize: 10
  },
  proxyConfig: {
    ajax: {
      query: ({ page }) => {
        return getData(page.currentPage, page.pageSize)
      }
    },
    response: {
      result: 'data',
      total: 'count'
    }
  },
  columns: [
    { type: 'seq', title: '序号', width: 70 },
    { field: 'auth_name', title: '权限名称' },
    { field: 'control', title: '操作', width: 100, fixed: 'right', slots: { default: 'control' } }
  ]
})

function getData(page: number, pageSize: number) {
  return new Promise((resolve, reject) => {
    const params = {
      authName: form.authName,
      page,
      pageSize
    }
    return http({
      url: '/api/auth/getAuthList',
      params
    })
      .then((res: any) => {
        resolve(res)
      })
      .catch(() => {
        reject()
      })
  })
}

function search() {
  const $grid = gridRef.value
  if ($grid) {
    $grid.commitProxy('reload')
  }
}
function reset() {
  form.authName = ''
}

/** 新增 */
const add = () => {
  const data = objectToFormData({
    authName: form2.authName
  })
  http({
    url: '/api/auth/addAuth',
    method: 'post',
    data
  }).then((res: any) => {
    console.log(res)
    if (res.code === 1) {
      notification({ type: 'success', message: res.msg })
      addDialogVisible.value = false
      search()
    }
  })
}

/** 删除 */
const del = (row: any) => {
  const data = objectToFormData({
    authId: row.auth_id
  })
  http({
    url: '/api/auth/deleteAuth',
    method: 'post',
    data
  }).then((res: any) => {
    if (res.code === 1) {
      notification({ type: 'success', message: res.msg })
      search()
    }
  })
}
</script>

<style lang="scss" scoped></style>
